<template>
  <div class="my-form-container" style="width: 100% !important; height: 100%; margin: 0;">
    <el-form :model="formData">
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>学期</span>
          </div>
          <label>{{ formData.xueqiname }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程【编号】名称</span>
          </div>
          <label>【{{ formData.course.courseCode }}】{{ formData.course.courseName }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>教学班名称</span>
          </div>
          <label>{{ formData.teachingClass.className }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>学时</span>
          </div>
          <label>{{ formData.course.totalHours }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>学分</span>
          </div>
          <label>{{ formData.course.credit }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>分类</span>
          </div>
          <label>{{ formData.course.subjectType }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>教学班主讲</span>
          </div>
          <label>{{ formData.teachingClass.mainEmployeeIds }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>教学班助教</span>
          </div>
          <label>{{ formData.teachingClass.tas }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>考核方式</span>
          </div>
          <label>{{ formData.course.khfs }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>分制</span>
          </div>
          <label>{{ formData.course.pointsSystem }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课下作业成绩所占比例</span>
          </div>
          <label>{{ formData.course.homeworkRatio }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课堂测试成绩所占比例</span>
          </div>
          <label>{{ formData.course.hskeRatio }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>期中考试成绩所占比例</span>
          </div>
          <label>{{ formData.course.midExamRatio }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课终考核成绩所占比例</span>
          </div>
          <label>{{ formData.course.finalExamRetio }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>选课要求</span>
          </div>
          <label>{{ formData.teachingClass.xkyaoqiul }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>额定人数</span>
          </div>
          <label>{{ formData.teachingClass.reserveNum }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>最大预选人数</span>
          </div>
          <label>{{ formData.teachingClass.maxNum }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>预选人数</span>
          </div>
          <label>{{ formData.teachingClass.preSelectionNum }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>正选人数</span>
          </div>
          <label>{{ formData.teachingClass.positiveNum }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>上课地点</span>
          </div>
          <label>{{ formData.teachingClass.shangkedidian }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>创建人</span>
          </div>
          <label>{{ formData.teachingClass.createor }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>创建时间</span>
          </div>
          <label>{{ formData.teachingClass.createtime }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>最后修改人</span>
          </div>
          <label>{{ formData.teachingClass.updateman }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>最后修改时间</span>
          </div>
          <label>{{ formData.teachingClass.updatetime }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>备注</span>
          </div>
          <label>{{ formData.teachingClass.bz }}</label>
        </el-form-item>
      </div>
    </el-form>
    <div style="margin: 20px 0; color: #004ca7; font-weight: 600; padding-left: 20px;">上课时间安排</div>
    <el-table
      border
      :data="tableData"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column prop="week" label="星期" width="100" show-overflow-tooltip align="center" />
      <el-table-column prop="section" label="上课节次" width="100" show-overflow-tooltip align="center" />
      <el-table-column v-for="(item, index) in weekArray" :key="index" :prop="item.prop" :label="item.label" show-overflow-tooltip align="center" />
    </el-table>
  </div>
</template>

<script>
import { reqGetCalendarList } from '@/api/admin1/check'
import { xxkkkgl_getClassInfo, queryCoursePlanDetail } from '@/api/trainingManagement/place'
export default {
  data() {
    return {
      formData: {
        course: {},
        teachingClass: {}
      },
      tableData: [],
      weekArray: [],
      courseList: []
    }
  },
  mounted () {
    const classNo = this.$route.query.id
    xxkkkgl_getClassInfo(classNo).then(res => {
      if (res.data.code === 200) {
        this.formData = res.data.data
        reqGetCalendarList(this.formData.course.xueqi).then(res => {
          if (res.data.code === 200) {
            this.courseList = res.data.data
            this.courseList.forEach((item, index) => {
              this.weekArray.push({ index: index, prop: 'week' + index, label: '第' + (index + 1) + '周' })
            })
            let data = []
            const params = { teachingClassId: classNo }
            queryCoursePlanDetail(params).then(res => {
              if (res.data.code === 200) {
                data = res.data.data
                let lineCode = -1
                let weekArray
                data.forEach(item => {
                  if (lineCode !== item.linecode) {
                    weekArray = {}
                    lineCode = item.linecode
                    this.courseList.forEach((subItem, index) => {
                      weekArray['week' + index] = false
                    })
                    weekArray['week' + (item.weeks - 1)] = '√'
                    weekArray['week'] = this.handleTransWeek(item.week)
                    weekArray['section'] = item.starcourses + '-' + item.endcourses
                    this.tableData.push(weekArray)
                  } else {
                    weekArray['week' + (item.weeks - 1)] = '√'
                  }
                })
              }
            })
          }
        })
      }
    })
  },
  methods: {
    handleTransWeek: function (val) {
      let week
      if (val === '1') {
        week = '星期一'
      } else if (val === '2') {
        week = '星期二'
      } else if (val === '3') {
        week = '星期三'
      } else if (val === '4') {
        week = '星期四'
      } else if (val === '5') {
        week = '星期五'
      } else if (val === '6') {
        week = '星期六'
      } else {
        week = '星期日'
      }
      return week
    }
  }
}
</script>

<style lang="less" scoped>
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  .my-form-item {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label {
        width: 220px;
        padding-left: 0;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        color: #004ca7;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }
      .mustW {
        color: red;
      }
      .el-form-item__content {
        display: flex;
      }
    }
    label {
      width: 100%;
      margin: 10px 30px 0;
      color: #004ca7;
    }
  }
</style>
